<template>
	<view class="main">
		<view class="nav">
			<view class="menuOuter flex-center" @click="$refs.broadSide.show()">
				<view class="menu"></view>
			</view>
			<view class="nav_menu flex-center">
				<view @click="handleClickNavItem(index)" class="nav_item flex-center" :class="{ nav_item_size: item.active }"
				 :style="{ color: item.active ? item.color : '#808080' }" v-for="(item, index) in nav_items" :key="index">
					{{ item.title }}
				</view>
			</view>
			<view class="outerSearch flex-center">
				<view class="search"></view>
			</view>
		</view>
		<view class="mainArea">
			<swiper @change="mainSwiperChange" :current="main_current" class="mainSwiper" :duration="300">
				<swiper-item>
					<mine @recUserDetail="recUserDetail" style="overflow: scroll;height: 100%;" />
				</swiper-item>
				<swiper-item>
					<find :userDetail="userDetail"/>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-red">c</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-red">d</view>
				</swiper-item>
			</swiper>
		</view>
		<broadSide ref="broadSide" :userDetail="userDetail" />
	</view>
</template>

<script>
	import find from '@/components/find';
	import mine from '@/components/mine';
	export default {
		data() {
			return {
				nav_items: [{
						title: '我的',
						active: true,
						color: '#000'
					},
					{
						title: '发现',
						active: false,
						color: 'black'
					},
					{
						title: '云村',
						active: false,
						color: 'black'
					},
					{
						title: '视频',
						active: false,
						color: 'black'
					}
				],
				main_current: 0,
				userDetail: {}
			};
		},
		components: {
			find,
			mine
		},
		//只能在页面中监听，不能在自定义组件中监听
		onBackPress(e) {
			if (e.from == 'backbutton' && this.$refs.broadSide.showLeftSide) {
				this.$refs.broadSide.hide();
				return true; //阻止默认返回
			}
		},
		methods: {
			recUserDetail(userDetail){
				this.userDetail = userDetail
			},
			mainSwiperChange(e) {
				this.main_current = e.detail.current
				this.nav_items = this.nav_items.map((v, i) => (e.detail.current == i ? { ...v,
					active: true
				} : { ...v,
					active: false
				}));
			},
			handleClickNavItem(index) {
				this.nav_items = this.nav_items.map((v, i) => {
					this.main_current = index;
					if (index == i) {
						return { ...v,
							active: true
						};
					} else {
						return { ...v,
							active: false
						};
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	.main {
		position: relative;
		.nav {
			z-index: 9;
			position: fixed;
			top: var(--status-bar-height);
			height: $nav_height;
			width: 750upx;
			display: flex;
			flex-shrink: 0;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

			.btn_active {
				background-color: rgba($color: #000000, $alpha: 0.1);
			}

			.menuOuter {
				height: $nav_height;
				width: 58px;

				&:active {
					border-top-right-radius: 20px;
					border-bottom-right-radius: 20px;
					@extend .btn_active;
				}

				.menu {
					background-image: url(../../static/main/menu.png);
					background-size: contain;
					width: 20px;
					height: 20px;
				}
			}

			.nav_menu {
				flex: 0.6;
				justify-content: space-between;

				.nav_item_size {
					font-size: 16px !important;
					transition: all 0.2s linear;
				}

				.nav_item {
					font-size: 14px;
					@include roundness(52);
					color: #808080;

					&:active {
						@extend .btn_active;
					}
				}
			}

			.outerSearch {
				height: calc(#{$nav_height}/ 1.2);
				width: calc(#{$nav_height}/ 1.2);
				border-radius: 50%;
				margin: 0 8px;

				&:active {
					@extend .btn_active;
				}

				.search {
					background-image: url(../../static/main/search.png);
					background-size: contain;
					width: 24px;
					height: 24px;
				}
			}
		}

		.mainArea {
			padding-top: calc(var(--status-bar-height) + #{$nav_height});
			height: 100vh;
			box-sizing: border-box;
			// background-color: #f8f8f8;
			// @include mainArea_theme(#f8f8f8);
			.mainSwiper {
				height: 100%;
				width: 100%;
			}
		}
	}
</style>
